/**
 *
 */
import Vue from "vue";

Vue.directive('dialog-drag', {
    bind(el, binding, vnode, oldVnode) {
        if ([undefined, false].includes(vnode.componentOptions.propsData.destroyOnClose)) doDrag(el, binding, vnode, oldVnode)
    },
    update(el, binding, vnode, oldVnode) {
        vnode.context.$nextTick(() => {
            if (vnode.componentOptions.propsData.visible === false) return;
            if ([true, ''].includes(vnode.componentOptions.propsData.destroyOnClose)) doDrag(el, binding, vnode, oldVnode)
        });
    }
})

function doDrag(el, binding, vnode, oldVnode) {
    const dragDom = el.querySelector('.el-dialog');
    const headDom = el.querySelector('.el-dialog__header');
    let {showFull, isDrag, isMini} = binding.value;
    let fullEl = $('<button type="button" data-full="false" aria-label="full" class="el-dialog__headerbtn full-btn"><i class="el-dialog__close el-icon el-icon-full-screen" /></button>');
    let minusEl = $('<button type="button" data-minus="false" aria-label="mini" class="el-dialog__headerbtn minus-btn"><i class="el-dialog__close el-icon el-icon-minus" /></button>');
    let resetEl = $('<button type="button" data-minus="false" data-full="false" aria-label="reset" class="el-dialog__headerbtn rest-btn"><i class="el-dialog__close el-icon el-icon-crop" /></button>');

    resetEl.hide();
    fullEl.hide();
    minusEl.hide();
    fullEl.click(function(e) {
        headDom.style.cursor = '';
        fullEl.data('full', true);
        resetEl.data('full', true);
        fullEl.hide();
        minusEl.hide();
        resetEl.show()
        $(dragDom).addClass('is-fullscreen');
    });
    minusEl.click(function (e) {
        headDom.style.cursor = '';
        minusEl.data('minus', true);
        resetEl.data('minus', true);
        minusEl.hide()
        fullEl.hide()
        resetEl.show();
        $(dragDom).addClass('is-minus');
        $('.v-modal').css('display', 'none')
    });
    resetEl.click(function (e) {
        resetEl.data('minus', false);
        minusEl.data('minus', false);
        resetEl.data('full', false);
        fullEl.data('full', false);
        resetEl.hide();
        if (showFull) fullEl.show();
        if (isMini) minusEl.show();
        $(dragDom).removeClass('is-minus');
        $(dragDom).removeClass('is-fullscreen');
        if (isDrag) headDom.style.cursor = 'move';
        $('.v-modal').css('display', 'inline-block')
    })
    $(headDom).find('.el-dialog__headerbtn').eq(0).before(minusEl, fullEl, resetEl);
    // 是否添加全屏功能
    if (showFull) fullEl.show();
    // 是否添加最小化功能
    if (isMini) minusEl.show();
    // 弹窗拖拽
    if (isDrag) {
        headDom.style.cursor = 'move';
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

        headDom.onmousedown = function (e) {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - headDom.offsetLeft;
            const disY = e.clientY - headDom.offsetTop;
            const screenWidth = document.documentElement.clientWidth;
            const screenHeight = document.documentElement.clientHeight;
            const dragWidth = dragDom.offsetWidth;
            const dragHeight = dragDom.offsetHeight;
            const minLeft = dragDom.offsetLeft; // 距离左侧最小值
            const maxLeft = screenWidth - dragDom.offsetLeft - dragWidth;   // 距离左侧最大值
            const minTop = dragDom.offsetTop;   // 距离顶部最小值
            const maxTop = screenHeight - dragDom.offsetTop - dragHeight;   // 距离顶部最大值
            // 获取到的值带px 正则匹配替换
            let styL, styT;
            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
            if (sty.left.includes('%')) {
                styL = +screenWidth * (+sty.left.replace(/%/g, '') / 100);
                styT = +screenHeight * (+sty.top.replace(/%/g, '') / 100);
            } else {
                styL = +sty.left.replace(/px/g, '');
                styT = +sty.top.replace(/px/g, '');
            }

            document.onmousemove = function (e) {
                // 通过事件委托，计算移动的距离
                let l = e.clientX - disX;
                let t = e.clientY - disY;
                if (-(l) > minLeft) l = -(minLeft);
                if (l > maxLeft) l = maxLeft;
                if (-(t) > minTop) t = -(minTop);
                if (t > maxTop) t = maxTop
                // 移动当前元素
                dragDom.style.left = `${l + styL}px`;
                dragDom.style.top = `${t + styT}px`;
                // 将此时的位置传出去
                // binding.value({x:e.pageX,y:e.pageY})
            };
            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
}

